<template>
  <!--  调价审批-->
  <div class="approve">
    <div style="display: flex">
      <el-button size="mini" @click="handleGetPurchaseList">{{ $t('btn.reload') }}</el-button>
      <el-button size="mini" @click="audit(1)">{{ $t('market.approve') }}</el-button>
      <el-button size="mini" @click="audit(2)">{{ $t('market.consentNo') }}</el-button>
      <el-button
        size="mini"
        style="margin-left: 10px"
        type="primary"
        @click="queryOrder"
      >{{ $t('market.approvalFlow') }}<i v-if="myOrder" class="el-icon-view" /></el-button>
      <el-button size="mini" type="primary" @click="forward(1)">{{ $t('market.forward') }}</el-button>
      <el-button size="mini" type="success" @click="forward(2)">{{ $t('market.forwardCom') }}</el-button>
      <el-button type="primary" size="mini" @click="handleCom">{{ $t('menu.purApprove') }}</el-button>
      <el-button type="warning" size="mini" @click="cuiban">{{ $t('market.cuiban') }}</el-button>
    </div>
    <div class="header">
      <div class="header-name">
        <search
          :options="selectData"
          :search-son="searchSon"
          :msg="tacitly"
          @seek="collect"
          @hand="handleQueryRefuse"
        />
        <el-button
          type="primary"
          class="btn"
          size="mini"
          @click="handleQueryRefuse"
        >
          {{ $t('btn.search') }}
        </el-button>
        <filtration
          :ftype="ftype"
          :msg="tacitly"
          :table-header="tableHeader1"
          :detail-header="tableHeader"
          :select-data="selectData"
          @seachData="handleQueryRefuse"
        />
      </div>
    </div>
    <div class="table-content">
      <jc-table
        v-loading="loading"
        :table-data="tableData"
        :table-header="tableHeader"
        sortable
        table-selection
        @selectionChange="handleSelectAll"
        @clickRow="handleDetail"
        @rowClick="rowClick"
      >
        <template v-slot:tagSlot="col">
          <el-link type="primary" @click="handleDetail(col.scope.row)">
            {{ col.scope.row.fbillno }}
          </el-link>
        </template>
        <!--    物料编码    -->
        <template v-slot:orderSlot="col">
          <el-link type="primary" @click="jumpMateriel(col.scope.row)">
            {{ col.scope.row.fnumber }}
          </el-link>
        </template>
        <template v-slot:btnState="clo">
          <span v-if="clo.scope.row.fdocumentstatus === ''" />
          <el-tag v-else :type="clo.scope.row.stateColor">
            {{ clo.scope.row.fdocumentstatus }}
          </el-tag>
        </template>
        <template v-slot:billSlot="clo">
          <el-tag v-if="clo.scope.row.fforbidstatus==='A'">{{ $t('market.normal') }}</el-tag>
          <el-tag v-else-if="clo.scope.row.fforbidstatus==='B'" type="danger">{{ $t('market.hasDisab') }}</el-tag>
        </template>
        <template v-slot:text2Slot="clo">
          <el-tag v-if="clo.scope.row.fstop==='A'">{{ $t('market.normal') }}</el-tag>
          <el-tag v-else-if="clo.scope.row.fstop==='B'" type="danger">{{ $t('btn.termin') }}</el-tag>
        </template>
        <template v-slot:text3Slot="clo">
          <el-tag v-if="clo.scope.row.fentrystop==='A'">{{ $t('market.normal') }}</el-tag>
          <el-tag v-else-if="clo.scope.row.fentrystop==='B'" type="danger">{{ $t('btn.termin') }}</el-tag>
        </template>
        <template v-slot:text4Slot="clo">
          <el-steps align-center>
            <el-step
              v-for="item in clo.scope.row.approval"
              :key="item.fentryid"
              :title="item.fname"
              :description="item.fstaffList.join(',')"
              :status="item.fstate===1? 'success' : item.fstate===0? 'error': 'wait'"
            />
          </el-steps>
        </template>
        <template v-slot:text5Slot="col">
          <el-button size="mini" type="primary" @click="openDetail(col.scope.row.approval)">{{ $t('market.appDetails') }}</el-button>
        </template>
      </jc-table>
    </div>
    <!--    分页器-->
    <div class="footer">
      <jc-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :page-sizes="[20,200,500,1000,2000,5000,10000]"
        @pagination="handleGetPurchaseList"
      />
    </div>
    <el-dialog
      v-dialogDrag
      :title="$t('market.approveNote')"
      model
      :visible.sync="isdanjuDialog"
      :close-on-click-modal="false"
      width="600px"
      top="5vh"
      center
      append-to-body
    >
      <span>{{ $t('market.approveNote') }}</span>
      <el-input v-model="remarks" type="textarea" />
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isdanjuDialog = false">{{ $t('btn.cancel') }}</el-button>
        <el-button size="mini" type="primary" @click="pushDownOrder()">
          {{ $t('btn.confirm') }}
        </el-button>
      </span>
    </el-dialog>
    <!--转发-->
    <el-dialog
      v-dialogDrag
      :title="forwardTitle"
      model
      :visible.sync="iswardDialog"
      :close-on-click-modal="false"
      width="600px"
      top="5vh"
      center
      append-to-body
    >
      <div v-if="confir === 1" style="height: 30px;line-height: 30px">
        {{ $t('market.forwarder') }}
        <el-select v-model="fstaffid">
          <el-option v-for="item in userList" :key="item.fstaffid" :label="item.fstaff" :value="item.fstaffid" />
        </el-select>
      </div>
      <div style="height: 30px;line-height: 30px">{{ $t('market.approveNote') }}</div>
      <el-input v-model="remarks1" type="textarea" />
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="iswardDialog = false">{{ $t('btn.cancel') }}</el-button>
        <el-button size="mini" type="primary" @click="forwardConfirm()">
          {{ $t('btn.confirm') }}
        </el-button>
      </span>
    </el-dialog>
    <!--  审批详情  -->
    <approvalxq v-if="isAppDetails" :table-data2="tableData2" @close="isAppDetails=false" />
    <appDetails v-if="diiscuss" :table-data2="approval" @close="diiscuss=false" />
  </div>
</template>

<script>
import {
  queryTPurPatApprovalList, tPurPatAuditUnApproval
} from '@/api/purchaseManagement/purchaseOrder'
import { toMxBmina } from '@/components/ToMxamineState'
import search from '@/components/Search/index'
import searData from '@/components/Search/mixin'
import filtration from '@/components/filtration'
import {
  forwardConfirmTPurPat,
  forwardTPurPat,
  queryForward,
  reviewPurPat,
  urgeTPurPat
} from '@/api/modifyPriceManagement/modifyPriceList'
import Bus from '@/utils/bus'
export default {
  name: 'ApplyList',
  components: {
    search,
    approvalxq: () => import('@/views/purchasing/purchase/purApproveList/approvalxq'),
    appDetails: () => import('@/views/purchasing/modifyPrice/components/appDetails'),
    filtration
  },
  mixins: [searData],
  data() {
    return {
      fbillNo: '',
      ftype: 84,
      myOrder: true,
      diiscuss: false,
      total: 0, // 总条目
      pageNum: 1, // 当前页
      pageSize: 200, // 每页显示多少条数据
      isdanjuDialog: false,
      isAppDetails: false,
      remarks1: '',
      userList: [],
      fstaffid: '',
      confir: 1,
      forwardTitle: '',
      iswardDialog: false,
      billTypeData: [], // 采购订单单据
      // 表头
      tableHeader: [
        { label: this.$t('market.billNo'), type: 'tag', prop: 'fbillno', width: '110' },
        { label: this.$t('market.supplier'), prop: 'fname', width: '200' },
        { label: this.$t('market.createtime'), prop: 'fcreateDate', width: '100' },
        { label: this.$t('market.creator'), prop: 'fcreator', width: '80' },
        { label: this.$t('market.documentstatus'), type: 'state', prop: 'fdocumentstatus', width: '80' },
        { label: this.$t('market.forbidStatu'), type: 'bill', prop: 'fforbidstatus', width: '80' },
        { label: this.$t('market.approveWate'), type: 'text4', width: '700' },
        { label: this.$t('market.appDetails'), type: 'text5', width: '120' }
      ],
      remarks: '',
      tableData: [],
      // 表格数据
      tableHeader1: [
        { label: this.$t('market.stock2'), prop: 'fstock' },
        { label: this.$t('market.billType'), prop: 'fbilltype' },
        { label: this.$t('market.applicant'), prop: 'fapplicant' },
        { label: this.$t('market.applyDate'), prop: 'fappivalDate' },
        { label: this.$t('market.modifier'), prop: 'fmodifier' },
        { label: this.$t('market.modifyDate'), prop: 'fmodifyDate' },
        { label: this.$t('market.approver'), prop: 'fapprover' },
        { label: this.$t('market.approveDate'), prop: 'fapproveDate' }
      ],
      approval: [],
      tableData2: []
    }
  },
  created() {
    this.handleGetPurchaseList()
    this.tableHeader1 = this.tableHeader.concat(this.tableHeader1)
  },
  methods: {
    // 评论
    rowClick(row) {
      this.diiscuss = true
      this.approval = row.approval
    },
    // 审批详情
    openDetail(ev) {
      this.tableData2 = ev
      this.isAppDetails = true
    },
    // 公共函数
    toExamineFun(api) {
      const DATA = {
        Numbers: this.selectVal,
        remarks: this.remarks
      }
      api(DATA).then(res => {
        if (res.code !== 0) {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
          return
        }
        this.isdanjuDialog = false
        this.handleGetPurchaseList()
        if (this.appro === 1) {
          Bus.$emit('reload')
        }
        this.selectVal = []
        this.innerHTM = ''
        res.data && res.data.forEach(res => {
          this.innerHTM += '<div>' + res + '</div>'
        })
        this.$notify.warning({
          title: '提示',
          message: this.innerHTM,
          duration: 3000, offset: 50,
          dangerouslyUseHTMLString: true
        })
      })
    },
    // 查询本人
    queryOrder() {
      this.myOrder = !this.myOrder
      this.handleGetPurchaseList()
    },
    // 获取列表数据
    async handleGetPurchaseList(ev) {
      this.loading = true
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = {
        list: this.list,
        myOrder: this.myOrder ? 'T' : 'F',
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        search: this.searCollData.concat(this.details)
      }
      const { data: res, code, message } = await queryTPurPatApprovalList(DATA)
      if (code !== 0) {
        this.loading = false
        this.$message.warning(message)
        return
      }
      const { array, total } = res
      this.tableData = array.map(item => {
        return toMxBmina(item)
      })
      this.total = total
      this.loading = false
    },
    // 搜索
    handleQueryRefuse(ev) {
      this.pageNum = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle(ev)
        this.handleGetPurchaseList(ev.detail)
      } else {
        this.handleGetPurchaseList()
      }
    },
    // 详情
    handleDetail(item) {
      this.$router.push({ path: `/editModifyPrice/${item.fid}` })
    },
    // 多选
    handleSelectAll(val) {
      this.selectVal = []
      this.val = val.forEach(res => {
        res.fbillno && this.selectVal.push(res.fbillno)
      })
    },
    // 提交
    audit(ev) {
      this.remarks = ''
      this.isdanjuDialog = true
      this.appro = ev
    },
    // 同意不同意
    pushDownOrder() {
      const api = this.appro === 1 ? reviewPurPat : tPurPatAuditUnApproval
      this.toExamineFun(api)
    },
    // 催办
    cuiban() {
      urgeTPurPat({ Numbers: this.selectVal }).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 打开转发弹窗
    forward(ev) {
      this.iswardDialog = true
      this.confir = ev
      this.remarks1 = ''
      this.fstaffid = ''
      ev === 1 ? this.forwardTitle = this.$t('market.forward') : this.forwardTitle = this.$t('market.forwardCom')
      ev === 1 && this.queryForwards()
    },
    // 转发人
    queryForwards() {
      const DATA = {
        Numbers: [this.selectVal[0]]
      }
      queryForward(DATA).then(res => {
        if (res.code === 0) {
          this.userList = res.data
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 转发
    forwardConfirm() {
      const DATA = {
        Numbers: [this.selectVal[0]],
        fstaffid: this.fstaffid,
        remarks: this.remarks1
      }
      const api = this.confir === 1 ? forwardTPurPat : forwardConfirmTPurPat
      api(DATA).then(res => {
        if (res.code === 0) {
          this.iswardDialog = false
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    handleCom() {
      const id = this.selectVal.join(',')
      this.$router.push({ path: `/modApprove/${id}` })
    }
  }
}
</script>
<style>
.el-step__title{
  font-size: 12px;
}
.el-step__icon {
  width: 16px;
  height: 16px;
}
.el-table .el-step__title {
  line-height: 20px;
}
</style>
<style lang="scss" scoped>
.approve {
  @include listBom;
  .header {
    position: relative;
    .header-name {
      width: 100%;
    }
    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
  .price-code {
    &:hover {
      color: #1e9fff;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
</style>
